<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="icon" href="/static/img/favicon.png">
</head>
<body>
{#导航#}
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="{% url "home" %}">JvHub</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="{% url "home" %}">主站<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'all_live' %}">直播<span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>
    <div>
        <img src="/static/img/head.png" class="d-block w-100" alt="..." style="height: 150px;">
    </div>
</header>

<div class="container" style="height: 500px;margin-top: 10px">
    <div class="row">
        <div class="col-auto">
            <h3>忘记密码</h3>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                   aria-controls="v-pills-home" aria-selected="true" onclick="">使用密保找回密码</a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
                   aria-controls="v-pills-profile" aria-selected="false"
                   onclick="$('#question_form').html(''); $('#question_username').val('');$('#question_error').val('')">使用邮箱找回密码</a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content" id="v-pills-tabContent">
                {#                密保找回#}
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                     aria-labelledby="v-pills-home-tab">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">输入用户名：</span>
                        </div>
                        <input type="text" class="form-control" aria-label="Username"
                               aria-describedby="basic-addon1" name="username" onchange="getQuestion()"
                               id="question_username">
                    </div>
                    <div id="question_error" class="text-danger" style="font-size: 10px">
                    </div>
                    <div id="pwd_form">
                        <form id="question_form">
                        </form>
                    </div>
                </div>

                {#                邮箱找回#}
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon2">输入用户名：</span>
                        </div>
                        <input type="text" class="form-control" aria-label="Username"
                               aria-describedby="basic-addon2" name="username" onchange="checkEmail()"
                               id="question_email">
                    </div>
                    <div id="email_error" class="text-danger" style="font-size: 10px">
                    </div>
                    <div id="pwd_email">
                        <form id="email_form">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid" style="background-color: #f6f7f8;height: 400px">
    <hr>
    <br>
    <br>
    <div class="row">
        <div class="col-md-4" align="center">
            <a href="#" style="text-decoration-line: unset;color: black">关于我们</a>
            <a href="#" style="text-decoration-line: unset;color: black">联系我们</a>
            <a href="#" style="text-decoration-line: unset;color: black">用户协议</a>
            <a href="#" style="text-decoration-line: unset;color: black">友情链接</a>
            <a href="#" style="text-decoration-line: unset;color: black">加入我们</a>
        </div>
        <div class="col-md-4" align="center">
            <a href="#" style="text-decoration-line: unset;color: black">侵权申诉</a>
            <a href="#" style="text-decoration-line: unset;color: black">活动中心</a>
            <a href="#" style="text-decoration-line: unset;color: black">社区中心</a>
            <a href="#" style="text-decoration-line: unset;color: black">广告合作</a>
        </div>
        <div class="col-md-4" align="center">
            <a href="#" style="text-decoration-line: unset;color: black">客户端下载</a>
            <a href="#" style="text-decoration-line: unset;color: black">新浪微博</a>
            <a href="#" style="text-decoration-line: unset;color: black">官方微信</a>
        </div>
    </div>
    <hr style="width: 70%">
</div>

<div id="footer">
</div>

<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

<script>

    function getQuestion() {
        $.ajax({
            type: 'POST',
            url: '{% url 'check_user'  %}',
            dataType: 'json',
            data: {'username': $('#question_username').val()},
            async: true,
            beforeSend: function (xhr, setting) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function (data) {
                if (data.status === 'fail') {
                    html = `<b>${data.msg}<b>`;
                    $('#question_form').html('');
                    $('#question_error').html(html);
                } else if (data.status === 'success') {
                    $('#question_form').html('');
                    $('#question_error').html('');
                    var user = data.data[0].user_id;
                    u_id = user;
                    var data_id = '';
                    for (da in data.data) {
                        var html = `
                               <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">${data.data[da].question__question}</span>
                        </div>
                        <input type="text" class="form-control" aria-label="Username"
                               aria-describedby="basic-addon1" name="${data.data[da].question_id}">
                    </div>
                               `;
                        data_id = data_id + ' ' + data.data[da].question_id;
                        $('#question_form').append(html);
                    }
                    var submit = `<div id="question_error" class="text-danger"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" id="questions_button" onclick="operation('#question_form','#questions_button','{% url 'secret_get_pwd' %}?data_id=${data_id}&user=${user}','#question_error')">提交</button>
                        `
                    $('#question_form').append(submit);
                }
            },
        });
    }

    function operation(form_id, submit_button, url, msg_id) {
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
            data: $(form_id).serialize(),
            async: true,
            beforeSend: function (xhr, setting) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                $(submit_button).attr({disabled: "disabled"});
            },
            success: function (data) {
                if (data.status == 'fail') {
                    $(msg_id).html(data.msg);
                } else if (data.status == 'success') {
                    $('#question_error').html('');
                    alert("密保通过验证,请即使修改密码");
                    var html = `
                    <div class="text-danger"> 请即使更改密码</div>
                        <form id="change_password_form">
                        <div class="form-group" hidden>
                            <input class="form-control" name="user" value="${$('#question_username').val()}">
                        </div>
                        <div class="form-group">
                            <label for="new_password" class="col-form-label">新密码:</label>
                            <i class="bi bi-question-circle text-secondary"
                               title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                            <input class="form-control" type="password" id="new_password" name="new_password" required
                                   placeholder="新密码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="new_check_password" class="col-form-label">重复密码:</label>
                            <i class="bi bi-question-circle text-secondary"
                               title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                            <input class="form-control" type="password" id="new_check_password"
                                   name="new_check_password" required
                                   placeholder="重复密码" autocomplete="off">
                        </div>
                        <div class="modal-footer">
                            <div id="change_pwd_error" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="change_pwd_button"
                                    onclick="operation2('#change_password_form','#change_pwd_button','{% url 'forget_pwd' %}','#change_pwd_error')">
                                提交
                            </button>
                        </div>
                    </form>
                    `;
                    $('#pwd_form').html(html);
                }
            },
            complete: function () {
                $(submit_button).removeAttr('disabled');
            },
        });
    }


    function operation2(form_id, submit_button, url, msg_id) {
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
            data: $(form_id).serialize(),
            async: true,
            beforeSend: function (xhr, setting) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                $(submit_button).attr({disabled: "disabled"});
            },
            success: function (data) {
                if (data.status == 'fail') {
                    $(msg_id).html(data.msg);
                } else if (data.status == 'success') {
                    alert(data.msg);
                    window.location.href = '{% url 'home' %}'
                }
            },
            complete: function () {
                $(submit_button).removeAttr('disabled');
            },
        });
    }


    {#    邮箱找回#}

    function checkEmail() {
        $.ajax({
            type: 'POST',
            url: '{% url 'check_email'  %}',
            dataType: 'json',
            data: {'username': $('#question_email').val()},
            async: true,
            beforeSend: function (xhr, setting) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function (data) {
                if (data.status === 'fail') {
                    html = `<b>${data.msg}<b>`;
                    $('#email_form').html('');
                    $('#email_error').html(html);
                } else if (data.status === 'success') {
                    $('#email_form').html('');
                    $('#email_error').html('');
                    var html = `<div class="form-group" hidden>
                            <input class="form-control" name="user" value="${$('#question_email').val()}">
                        </div>
                        <div class="alert alert-success" role="alert">此用户已绑定邮箱！</div>
                            <div id="send_email_error" class="text-danger"></div>
                            <button type="submit" class="btn btn-primary" id="send_email_button"
                                    onclick="operation2('#email_form','#send_email_button','{% url 'renewpwd_sendemail' %}','#send_email_error')">
                                点击向此用户的邮箱发送验证信息
                            </button>`;
                    $('#email_form').html(html);
                }
            },
        });
    }

</script>
</body>
</html>